#include("common.html")
<html lang="en"><head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="#(tpath)/static/css/element.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/basic.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/index.css">
    <script src="#(tpath)/static/js/jquery.js"></script>
    <script src="#(tpath)/static/js/common.js"></script>
    <!-- swiper -->
	<link rel="stylesheet" type="text/css" href="#(tpath)/static/swiper/swiper.min.css">
	<script src="#(tpath)/static/swiper/swiper.min.js"></script>
</head>
<body class="">
#include("header.html")
<div id="mall">
  <div class="main_con">
    <div class="allwarp">
      <div class="notice_box fr">
        <dl class="notice1">
          <dt>
          <h5>公告&amp;帮助</h5></dt>
          #article_list(count=3)
          #for(article : articles)
          <dd>
            <img src="#(base)/static/images/gmh_hot.png" style="float: left;width: 16px;height: 16px;">
            <a href="#(article.path)" class="help_title">#(article.title)</a>
            <div style="clear: both;"></div>
          </dd>
          #end
          #end
          <div class="cl"></div>
        </dl>
      </div>
      <div class="main_visual fl">
        <div class="banner_content">
          <div class="swiper-container">
		    <div class="swiper-wrapper">
		      #ad_position(id=1)
              #for(ad : adPosition.ads)
		      <div class="swiper-slide"><a href="#(base)/product/list?keyword=#(ad.name)"><img src="#(imageUrl(ad.image))" width="100%" height="100%"></a></div>
		      #end
              #end
		    </div>
		    <!-- Add Arrows -->
		    <div class="swiper-button-next"></div>
		    <div class="swiper-button-prev"></div>
		  </div>
        </div>
      </div>
      <div class="cl"></div>
      <div class="fen">
        <div class="fl fen-list">
          <div class="fl fen-title">
            <p>最新商品
              <span>New Goods</span></p>
            <a href="#(base)/product/list?tag=热销新款" target="_blank">
              <img src="#(base)/static/images/zuixin.png" width="270px"></a>
          </div>
          <div class="fl fen-cont">
            <div class="fr circle">
             <a style="background: #ccc;" onclick="showlist(1,3,'cplist')">
              </a>
              <a style="background: #ccc;" onclick="showlist(2,3,'cplist')">
              </a>
              <a style="background: #ccc;" onclick="showlist(3,3,'cplist')">
              </a>
            </div>
            <div class="cl"></div>
            
             #for(i : [0,3,6])
            <ul class="cp-list" id="cplist#(for.index+1)" #if(for.index==0) #else style="display:none;" #end>
            
              <!-- list start -->
              #product_list(start=i,count=3,tag="热销新款")
              #for(product : products)
              <li onclick="location.href='#(product.path)'">
                <img src="#(imageUrl(product.image))" class="fl">
                <div class="fl cp-list-txt">
                  <h3>
                    <span class="cp_price">
                      <span style="color: rgb(136, 76, 255);">￥#(product.price)</span></span>
                    <div class="cl"></div>
                  </h3>
                  <p>
                    <span class="cp_max_price">￥#(product.marketPrice)</span></p>
                  <div class="cl"></div>
                  <h4>
                    <!-- <span class="el-tag el-tag--mini" effect="dark" style="background-color: rgb(230, 162, 60); color: rgb(255, 255, 255);">#(product.tag)</span> -->
                    #(product.name)</h4></div>
              </li>
              #end
              #end
              <!-- list end -->
              <div class="cl"></div>
            </ul>
            #end
            
          </div>
        </div>
        <div class="fr fen-list">
          <div class="fl fen-title">
            <p>热卖商品<span>Hot Sale</span></p>
            <a href="#(base)/product/list?tag=热卖商品" target="_blank">
              <img src="#(base)/static/images/remai.png" width="270px"></a>
          </div>
          <div class="fl fen-cont">
            <div class="fr circle">
              <a style="background: #ccc;" onclick="showlist(1,3,'hcplist')">
              </a>
              <a style="background: #ccc;" onclick="showlist(2,3,'hcplist')">
              </a>
              <a style="background: #ccc;" onclick="showlist(3,3,'hcplist')">
              </a>
            </div>
            <div class="cl"></div>
            
             #for(i : [0,3,6])
            <ul class="cp-list" id="hcplist#(for.index+1)" #if(for.index==0) #else style="display:none;" #end>
              <!-- list start -->
              #product_list(start=i,count=3,tag="热卖商品")
              #for(product : products)
              <li onclick="location.href='#(product.path)'">
                <img src="#(imageUrl(product.image))" class="fl">
                <div class="fl cp-list-txt">
                  <h3>
                    <span class="cp_price">
                      <span style="color: rgb(136, 76, 255);">￥#(product.price)</span></span>
                    <div class="cl"></div>
                  </h3>
                  <p>
                    <span class="cp_max_price">￥#(product.marketPrice)</span></p>
                  <div class="cl"></div>
                  <h4>
                    <!-- <span class="el-tag el-tag--mini" effect="dark" style="background-color: rgb(230, 162, 60); color: rgb(255, 255, 255);">#(product.tag)</span> -->
                    #(product.name)</h4></div>
              </li>
              #end
              #end
               <!-- list end -->
              <div class="cl"></div>
            </ul>
            #end
            
          </div>
        </div>
      </div>
      #seckill(id=1)
      #if(seckill.isStart)
      <div class="miao">
        <div class="miao-title">
          <div class="fl">
            <img src="#(base)/static/images/wx_purchase.svg" class="fl" height="40" width="40" style="width: 40px;height: 40px;margin: 0px 15px;">
            <div class="fl time">倒计时：
              <span id="seckillDay">00</span>天<span id="seckillHour">00</span>时<span id="seckillMinute">00</span>分<span id="seckillSecond">00</span>秒
              </div>
          </div>
          <!-- <div class="fr more">查看更多</div> --></div>
        <div class="maio-list">
          <div class="el-carousel el-carousel--horizontal">
            <div class="el-carousel__container">
              <button type="button" class="el-carousel__arrow el-carousel__arrow--left" style="display: none;">
                <i class="el-icon-arrow-left"></i>
              </button>
              <button type="button" class="el-carousel__arrow el-carousel__arrow--right" style="display: none;">
                <i class="el-icon-arrow-right"></i>
              </button>
              <div class="el-carousel__item is-active is-animating" style="transform: translateX(0px) scale(1);">
                <!---->
                
                <!-- list start -->
                #for(seckillProduct : seckill.seckillProducts)
                <a href="#(seckillProduct.product.path)">
                  <img src="#(imageUrl(seckillProduct.product.image))">
                  <div class="maio-price">
                    <span class="price-now">￥#(seckillProduct.price)</span>
                    <span class="price-befor">￥#(seckillProduct.product.price)</span></div>
                  <div class="maio-cptitle">
                    <p class="fl">
                      <!---->
                      <!---->限时折扣</p>
                    <span class="fr">￥#(seckillProduct.price)</span></div>
                </a>
                #end
                <!-- list end -->
                
              </div>
            </div>
            </div>
        </div>
      </div>
            <script>
 function seckill(){
	// 当前时间
		//var startTime = new Date("#date(seckill.startDate,'yyyy/MM/dd HH:mm:ss')");
	     var nowTime = new Date();
		// 2016/12/22 hh:mm:ee
		// 结束时间
		var endTime = new Date("#date(seckill.endDate,'yyyy/MM/dd HH:mm:ss')");
	// 相差的时间	
	var t = endTime.getTime() - nowTime.getTime();
	if(t<=0){
		return false;
	}

	var d = Math.floor(t/1000/60/60/24);
	
	var h = Math.floor(t/1000/60/60%24);
	var i = Math.floor(t/1000/60%60);
	var s = Math.floor(t/1000%60);

	document.getElementById('seckillDay').innerHTML = d;
	document.getElementById('seckillHour').innerHTML = h;
	document.getElementById('seckillMinute').innerHTML = i;
	document.getElementById('seckillSecond').innerHTML = s;

	setInterval(seckill, 1000);
} 
 seckill();
</script>
      #end
      #end
      
      #group(id=1)
      #if(group.isStart)
      <div class="miao">
        <div class="miao-title" style="background-color: #01e1ad;height: 40px;">
          <div class="fl">
            <img src="#(tpath)/static/images/pintuan.png" height="40" width="40" style="width: 40px;height: 40px;margin-top: 0px;" class="fl">
            <div class="fl time">倒计时：
              <span id="groupDay">00</span>天<span id="groupHour">00</span>时<span id="groupMinute">00</span>分<span id="groupSecond">00</span>秒
              </div>
          </div>
          <!-- <div class="fr more">查看更多</div> --></div>
        <div class="maio-list">
          <div class="el-carousel el-carousel--horizontal">
            <div class="el-carousel__container">
              <button type="button" class="el-carousel__arrow el-carousel__arrow--left" style="display: none;">
                <i class="el-icon-arrow-left"></i>
              </button>
              <button type="button" class="el-carousel__arrow el-carousel__arrow--right" style="display: none;">
                <i class="el-icon-arrow-right"></i>
              </button>
              <div class="el-carousel__item is-active is-animating" style="transform: translateX(0px) scale(1);">
                <!-- list start -->
                #for(groupProduct : group.groupProducts)
                <a href="#(groupProduct.product.path)">
                  <img src="#(imageUrl(groupProduct.product.image))">
                  <div class="maio-price">
                    <span class="price-now">￥#(groupProduct.price)</span>
                    <span class="price-befor">￥#(groupProduct.product.price)</span></div>
                  <div class="maio-cptitle">
                    <p class="fl">
                      <!---->
                      <!---->限时拼团</p>
                    <span class="fr">￥#(groupProduct.price)</span></div>
                </a>
                #end
                <!-- list end -->
              </div>
            </div>
            </div>
        </div>
      </div>
            <script>
 function group(){
	// 当前时间
		//var startTime = new Date("#date(group.startDate,'yyyy/MM/dd HH:mm:ss')");
	     var nowTime = new Date();
		// 2016/12/22 hh:mm:ee
		// 结束时间
		var endTime = new Date("#date(group.endDate,'yyyy/MM/dd HH:mm:ss')");
	// 相差的时间	
	var t = endTime.getTime() - nowTime.getTime();
	if(t<=0){
		return false;
	}

	var d = Math.floor(t/1000/60/60/24);
	
	var h = Math.floor(t/1000/60/60%24);
	var i = Math.floor(t/1000/60%60);
	var s = Math.floor(t/1000%60);

	document.getElementById('groupDay').innerHTML = d;
	document.getElementById('groupHour').innerHTML = h;
	document.getElementById('groupMinute').innerHTML = i;
	document.getElementById('groupSecond').innerHTML = s;

	setInterval(group, 1000);
} 
 group();
</script>
      #end
      #end

      #product_category_root_list()
      #for(productCategory : productCategorys)
      <div class="item">
        <div class="fl">
          <h2>#(productCategory.name)</h2>
        <div class="fl item-right" style="width: 100%">
          <div class="item-txt">
          	<!-- list start -->
          	#product_list(count=8,productCategoryId=productCategory.id)
            #for(product : products)
            <a href="#(product.path)">
              <div class="item-img"><img src="#(imageUrl(product.image))"></div>
              <div class="cp-list-txt">
                <h3 style="text-align: center;">
                  <span class="cp_price">
                    <span style="color: rgb(136, 76, 255);">￥#(product.price)</span></span>
                  </h3>
                <div class="cl"></div>
                <div class="cl"></div>
                <h4 style="text-align: center;">
                  <!-- <span class="el-tag el-tag--mini" effect="dark" style="background-color: rgb(103, 194, 58); color: rgb(255, 255, 255);">#(product.tag)</span> -->
                  #(product.name)</h4></div>
            </a>
            #end
            #end
            <!-- list end -->
            </div>
        </div>
        <div class="cl"></div>
        <div class="pinpai">
        <!-- list start -->
          #brand_list(count=8)
          #for(brand : brands)
          <a href="#(brand.path)">
            <img src="#(imageUrl(brand.image))"></a>
          #end
          #end
       <!-- list end -->
          <a href="#(base)/brand/list">更多品牌&gt;&gt;</a>
        </div>
      </div>
      </div>
      #end
      #end
      </div>
  </div>
</div>
#include("footer.html")
</body></html>
  <script>
    var swiper = new Swiper('.swiper-container', {
    	loop: true,
    	navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    
    function showlist(index,total,item){
    	for(i=1;i<=total;i++){
    		if(index==i){
    			$("#"+item+i).show();
    		}else{
    			$("#"+item+i).hide();
    		}
    		
    	}
    }
  </script>